<template>
  <el-form
    ref="ruleForm"
    :model="ruleForm"
    :rules="rules"
    label-width="100px"
    class="demo-ruleForm"
  >
    <el-col
      v-for="(item, index) in options"
      :key="index"
      :span="item.span || 24"
    >
      <el-form-item :label="item.label" :prop="item.key">
        <el-select
          :disabled="disabled"
          v-if="item.type == 'select'"
          v-model="item.value"
          :multiple="item.multiple"
          @change="item.onchange"
        >
          <el-option
            v-for="e in item.option"
            :key="e.value"
            :label="e.label"
            :value="e.value"
          />
        </el-select>

        <el-select
          v-if="item.type == 'selectApproves'"
          v-model="item.value"
          :multiple="item.multiple"
          @change="item.onchange"
        >
          <el-option
            v-for="e in item.option"
            :key="e.value"
            :label="e.label"
            :value="e.value + ',' + e.label"
          />
        </el-select>
        <SelectTree
          v-if="item.type == 'selectTree'"
          :disabled="disabled"
          :props="item.props"
          :options="item.optionData"
          :value="item.value"
          :clearable="item.isClearable"
          :accordion="item.isAccordion"
          :checkStrictly="item.checkStrictly"
          height="200"
          @getValue="item.getValue($event)"
        />
      </el-form-item>
    </el-col>
  </el-form>
</template>
<script>
import SelectTree from "@/components/SelectTree";
export default {
  components: { SelectTree },
  props: ["options", "disabled"],
  data() {
    return {
      ruleForm: {
        // 这里的值和业务要求的一致
        billType: this.options,
        organIds: this.options,
      },

      rules: {
        person1: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        person2: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        person3: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        person4: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        person5: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
      },
    };
  },
  watch: {
    "this.$store.state.system.approveItem": {
      handler(newData, oldData) {
        this.$set(
          this.ruleForm,
          "billType",
          this.$store.state.system.approveItem.billType
        ); // 填充审批类别

        this.$set(
          this.ruleForm,
          "organIds",
          this.$store.state.system.approveItem.organIds
        ); // 填充审批范围
      },
      immediate: true,
      deep: true,
    },
    // "this.options[0]": {
    //   handler(newData, oldData) {
    //     // this.$set(this.ruleForm,"billType",this.$store.state.system.approveItem.billType)  //填充审批类别
    //     //this.$set(this.ruleForm,"organIds",this.$store.state.system.approveItem.organIds)  //填充审批范围
    //   },
    //   immediate: true,
    //   deep: true
    // }
    // ...mapState(["system","app"]),
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style>
.tag-names {
  border: 1px solid rgba(0, 0, 0, 0.15);
  margin: 0 10px 10px 5px;
  padding: 10px;
}
.tag-name {
  margin: 2px 1px;
}
</style>
